.simple-tabs {

  &-container {
    &.border {
      border: solid 1px var(--light);
    }

    &.vertical {
      display: flex;

      & > ul {
        padding-right: 1rem;
        border-right: solid 1px var(--light);

        &.no-border {
          border-right: none;
        }
      }

      & > section {
        flex: 1;
      }
    }
  }

  &-menu {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: fit-content;
    max-width: 100vw;
    overflow-x: auto;

    &-tab {
      flex: 1;
      display: flex;

      &.border {
        border: solid 1px var(--light);
        border-bottom: none;
      }

      &-btn {
        margin: auto;
        width: 100%;
        padding: 1rem 2rem;
        border: none;
        cursor: pointer;
        background-color: var(--light);
        color: var(--secondary);

        &.active {
          background-color: var(--white);
          color: var(--dark);
        }

        &.border {
          border-bottom: solid 2px transparent;

          &.active {
            border-color: var(--info);
          }
        }

        &:disabled {
          cursor: auto;
        }

        &:focus {
          outline: none;
        }
      }

      &.pills {
        & > button, & > a {
          border-radius: 5px;
          background-color: transparent;
          padding: 0.75rem 2rem;

          &.active {
            background-color: var(--info);
            color: var(--white);

          }
        }
      }

      &.steps-simple {
        &:not(:first-child) {
          position: relative;

          &::after {
            position: absolute;
            content: "";
            border-bottom:solid 1px var(--secondary);
            top: calc(1rem + 2rem);
            width: calc(100% - 4rem);
            right: calc(50% + 2rem + 3px);
          }
        }
      }
    }

    &.vertical {
      flex-direction: column;
    }

    &.steps:not(.steps-simple) {
      border-bottom: solid 1px var(--light);
    }

    &.steps &-tab {
      background-color: transparent;

      &-btn {
        background-color: transparent;

        & .label {
          &.done {
            color: var(--primary);
          }

          &-ordinal {
            border-radius: 50%;
            background-color: var(--secondary);
            color: var(--white);
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            margin-right: 0.5rem;

            &.steps-simple {
              width: 4rem;
              height: 4rem;
              font-size: 2rem;
              line-height: 100%;
            }

            &.done {
              background-color: var(--primary);
            }

            &-number {
              margin: auto;
            }
          }
        }

        &.active {
          & .label {
            font-weight: bold;
            color: var(--dark);

            &-ordinal {
              background-color: var(--dark);
            }
          }
        }

        &.steps-simple {
          border-radius: 50%;

          &.active {
            & .label {
              font-weight: bold;
              color: var(--dark);

              &-ordinal {
                background-color: var(--info);
              }
            }
          }
        }
      }
    }
  }

  &-content {
    padding: 1rem;
    max-width: 100vw;
    overflow-x: auto;

    &-section {
      display: none;

      &.active {
        display: block;
      }
    }

    &.left-border {
      border-left: solid 1px var(--light);
    }
  }
}


.original.simple-tabs {
  .simple-tabs {

    &-container {
      &.vertical {
        & > section {
        }
      }
    }

    &-menu {
      margin: auto;
      width: max-content;

      &-tab {
        &-btn {
          padding: 0.5rem 2rem;
          white-space: nowrap;

          &.border {
            border-bottom: solid 4px transparent;
          }
        }
      }
    }

    &-content {
      background-color: var(--white);

      &-section {

      }
    }
  }
}
